<!-- 订单管理 -->
<template>
	<view class="box">
		<view class="box-bg">
			<view class="tui-header-box"
				:style="{ height: height + 'rpx',top:top*2+'rpx', background: 'rgba(255,255,255,0)' }">
				<view class="tui-header-icon" @click="toLeft()">
					<uni-icons type="left" size="22" color="#FFF"></uni-icons>
				</view>
				<view class="header-text">
					<view class="header-name">订单详情</view>
				</view>
			</view>

			<view class="order-stutas-box">
				<view class="order-icon">
					<image :src="`${picUrl}/jh/order-icon-1.png`"></image>
				</view>
				<view class="order-icon-1">
					<view class="order-icon-2">{{state_text}}</view>
					<view class="order-icon-3" v-if="state_text=='待付款'">订单将在{{order_cancel_day}}后自动取消～</view>
					<view class="order-icon-3" v-if="state_text=='待发货'">请尽快发货～</view>
					<view class="order-icon-3" v-if="state_text=='待收货'">订单将在{{order_confirm_day}}自动确认收货</view>
					<view class="order-icon-3" v-if="state_text=='交易完成'||state_text=='退款完成' ">订单已完成～</view>
				</view>
			</view>
		</view>
		<view class="order-address">
			<view class="order-address-list">
				<view class="address">{{reciver_info.reciver_address}}</view>
				<view class="contacts">
					<image src="../static/home_bottom17.png"></image>
					<span>{{reciver_info.reciver_name}}</span>{{reciver_info.reciver_mobile}}
				</view>
			</view>
		</view>
		<view class="box-card" style="margin-top: 156rpx;">
			<view class="order-list-1" v-for="(item,index) in menuList.goods_list" :key="index">
				<view class="order-list-2">
					<view class="order-list-icon">
						<image :src="item.goods_image_url"></image>
					</view>
					<view class="order-info">
						<view class="order-name">{{item.goods_name}}</view>
						<view class="order-text-list">
							<view class="order-price">{{'¥'+item.goods_price}}</view>
							<view class="order-count">{{'x'+item.goods_num}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="lable" style="margin-top: 30rpx;">订单信息</view>
			<view class="box-card-list">
				<view class="card-list-1">订单编号：</view>
				<view class="card-list-2">{{order_info.order_sn}}</view>
			</view>
			<view class="box-card-list">
				<view class="card-list-1">创建时间：</view>
				<view class="card-list-2">{{order_info.add_datetime}}</view>
			</view>
			<view class="box-card-list" v-if="state_text!='待付款'&&state_text!='交易关闭'">
				<view class="card-list-1">支付时间：</view>
				<view class="card-list-2">{{order_info.payment_datetime}}</view>
			</view>
			<view class="box-card-list" v-if="state_text!='待付款'&&state_text!='交易关闭'">
				<view class="card-list-1">支付方式：</view>
				<view class="card-list-2">{{order_info.payment_name}}</view>
			</view>
		</view>
		<view style="height: 96rpx;"></view>
		<view class="order-list-but" v-if="menuList.if_cancel||menuList.if_send||menuList.if_deliver">
			<view class="look-but" v-if="menuList.if_deliver" @click="checkLoglist">
				查看物流
			</view>
			<view class="look-but look-but-active" v-if="menuList.if_send" @click="toSendOrder">
				确认发货
			</view>
			<view class="look-but" v-if="menuList.if_cancel" @click="closeOrder">
				取消订单
			</view>
		</view>
		<uni-popup type="center" ref="reason">
			<view class="popup-open">确认取消该订单吗？</view>
			<input class="reason-input" v-model="reasonText" type="text" placeholder="请输入取消原因" />
			<view class="buttons">
				<view style="color: #000;" @click="close">取消</view>
				<view style="color: #fff;background-color: #ff0000ba;" @click="confirm">确认</view>
			</view>
		</uni-popup>
		<SendPop v-if="isShow1" @fnChange="closeSend" :info="menuList" />
	</view>
</template>

<script>
	import SendPop from '@/SupplyEnd/good/popup/sendPop.vue'
	export default {
		components: {
			SendPop
		},
		data() {
			return {
				isShow1: false,
				position: 1,
				show: false,
				maskClosable: true,
				checked: false,
				bannerList: [1, 2, 3],
				height: 88,
				top: 20,
				menuList: '',
				order_id: "",
				order_cancel_day: '',
				order_confirm_day: '',
				state_text: "", //订单状态文本
				reciver_info: { //收货信息
					reciver_address: "",
					reciver_name: "",
					reciver_mobile: ""
				},
				reasonText: '',
				order_info: { //订单信息
					order_sn: "",
					add_datetime: "",
					payment_datetime: '',
					payment_name: ""
				}
			}
		},
		onLoad(option) {
			let obj = {};
			uni.getSystemInfo({
				success: res => {
					this.top = res.statusBarHeight;
				}
			});
			this.order_id = option.order_id
			setTimeout(() => {
				this.getDetail()
			}, 15 * 60 * 1000)
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			toLeft() { //离开
				uni.navigateBack({
					delta: 1,
					fail() {
						uni.switchTab({
							url: '/main/home/index'
						})
					}
				})
			},
			getDetail() { //获取订单详情页面数据
				let url = '';
				if (!uni.getStorageSync("key")) {
					return uni.redirectTo({
						url: "/SupplyEnd/login/login",
					});
				}
				url = "/mobile/index.php?act=supplier-order&op=detail";
				let that = this
				this.$util.request({
					url: url,
					method: 'get',
					data: {
						order_id: that.order_id
					}
				}).then(res => {
					if (res.error_code == 0) {
						//更新页面数据
						that.menuList = res.datas.order
						if (that.menuList != '') {
							that.state_text = that.menuList.order_state_txt
							that.order_cancel_day = that.menuList.order_cancel_day
							that.order_confirm_day = that.menuList.order_confirm_day
							that.reciver_info = {
								reciver_address: that.menuList.reciver_address,
								reciver_name: that.menuList.reciver_name,
								reciver_mobile: that.menuList.reciver_mobile
							}
							that.order_info = {
								order_sn: that.menuList.order_sn,
								add_datetime: that.menuList.add_datetime,
								payment_datetime: that.menuList.payment_datetime,
								payment_name: that.menuList.payment_name
							}
						}

					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			checkLoglist() { //查看物流
				uni.navigateTo({
					url: `/SupplyEnd/good/checkLoglist?order_id=${this.order_id}`
				})
			},
			closeOrder() { //取消订单
				this.$refs.reason.open()
				if (!uni.getStorageSync("key")) {
					return uni.redirectTo({
						url: "/SupplyEnd/login/login",
					});
				}
			},
			close() {
				this.reasonText = ''
				this.$refs.reason.close()
			},
			//取消订单
			confirm() {
				let url = '';
				let that = this
				url = "/mobile/index.php?act=supplier-order&op=close";
				that.$util.request({
					url: url,
					method: 'post',
					data: {
						order_id: that.order_id,
						reason: that.reasonText
					}
				}).then(res => {
					if (res.error_code == 0) {
						that.menuList = []
						//更新页面数据
						setTimeout(() => {
							that.getDetail()
							that.reasonText = ''
							that.$refs.reason.close()
						}, 200)
						console.log('操作成功')
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			toSendOrder() { //跳转确认发货页面
				this.isShow1 =true
			},
			closeSend() {
				this.isShow1 = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .uni-navbar--fixed {
		background: linear-gradient(200deg, #EA8C1E 0%, #E84A1D 100%);
	}

	.tui-header-box {
		position: fixed;
		left: 30rpx;
		right: 0;
		top: 40rpx;
		z-index: 9995;
		display: flex;
		align-items: center;

		.tui-header-icon {
			image {
				width: 307rpx;
				height: 30rpx;
			}
		}

		.header-text {
			width: 100%;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;

			.header-name {
				font-size: 36rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				padding-right: 36rpx;
			}
		}
	}

	.box-bg {
		width: 100%;
		height: 436rpx;
		background: linear-gradient(315deg, #EA8C1E 0%, #E84A1D 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		position: relative;

		.order-stutas-box {
			display: flex;
			align-items: center;
			position: absolute;
			left: 30rpx;
			right: 30rpx;
			bottom: 124rpx;

			.order-icon {
				width: 80rpx;
				height: 80rpx;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.order-icon-1 {
				margin-left: 30rpx;

				.order-icon-2 {
					font-size: 40rpx;
					font-family: PingFang SC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
				}

				.order-icon-3 {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}
	}

	.order-address {
		background-color: #FFFFFF;
		margin: -80rpx 30rpx 0;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		position: absolute;
		left: 0;
		right: 0;

		.order-address-list {
			padding: 36rpx 30rpx;

			.address {
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #323232;
			}

			.contacts {
				margin-top: 30rpx;
				display: flex;
				align-items: center;

				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #323232;

				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
				}

				span {
					margin-left: 10rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #323232;

					margin-right: 30rpx;
				}
			}
		}
	}

	.box-card {
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		padding: 20rpx;
		margin: 30rpx;

		.lable {
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #323232;
		}

		.box-card-list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;

			.card-list-1 {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.card-list-2 {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #646464;
			}
		}
	}

	.order-list-1 {
		background-color: #FFF;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		display: flex;
		flex-direction: column;
		// padding: 30rpx;
		position: relative;
		//margin-bottom: 30rpx;

		.order-list-1-subscript {
			width: 130rpx;
			height: 130rpx;

			position: absolute;
			top: 0;
			left: 0;
			z-index: 9;
		}

		.order-list-info {
			display: flex;
			justify-content: space-between;

			.order-shopname {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #323232;
				display: flex;
				flex-direction: row;
				align-items: center;

				.shop-icon {
					width: 38rpx;
					height: 38rpx;
					background: linear-gradient(180deg, #EA8C1E 0%, #E84A1D 100%);
					opacity: 1;

					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;

					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					margin-right: 10rpx;

					text {
						transform: scale(0.8);
						font-family: 500;
					}
				}
			}

			.order-stutas {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #E96A1D;
			}

			.order-stutas2 {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #323232;
			}
		}

		.order-list-2 {
			display: flex;
			margin-top: 20rpx;
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #EEEEEE;

			.order-list-icon {
				width: 200rpx;
				height: 200rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 5rpx;
				}
			}

			.order-info {
				margin-left: 30rpx;
				position: relative;
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.order-name {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #323232;
				}

				.order-name-sp-list {
					.order-name-sp {
						height: 32rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #909090;
					}
				}

				.order-text-list {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 13rpx;

					.order-price {
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #E96A1D;
					}

					.order-count {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #323232;
					}
				}

				.order-text {
					position: absolute;
					bottom: 43rpx;
					left: 0;
					right: 0;
					display: flex;
					align-items: center;

					.order-price {
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #E96A1D;
					}

					.order-score {
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #909090;
					}

					/deep/ .uni-rate {
						margin-top: 10rpx;
					}

					.order-score-icon {
						display: flex;
						align-items: center;
					}
				}

				.order-text2 {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.order-count {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #323232;
					}

					.order-num {
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #323232;
					}
				}
			}
		}

		.order-text {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #909090;
			margin-bottom: 16rpx;
		}
	}

	.order-list-but {
		position: fixed;
		width: 92%;
		padding: 0 30rpx;
		height: 96rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		background-color: #FFF;
		bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		bottom: env(safe-area-inset-bottom);

		/*兼容 IOS>11.2*/
		.look-but-1 {
			width: 160rpx;
			height: 70rpx;
			background: #FFFFFF;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			opacity: 1;
			border: 2rpx solid #E96A1D;
			display: flex;
			align-items: center;
			justify-content: center;

			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #E96A1D;
		}

		.look-but {
			width: 160rpx;
			height: 70rpx;
			background: #FFFFFF;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			opacity: 1;
			border: 2rpx solid #323232;

			display: flex;
			align-items: center;
			justify-content: center;

			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #323232;
			margin-left: 20rpx;
		}

		.look-but-active {
			color: #E96A1D;
			border: 2rpx solid #E96A1D;
		}

		.grounding {
			display: flex;
			width: 140rpx;
			height: 60rpx;
			background: #F7F7F7;
			border-radius: 50rpx;
			opacity: 1;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #323232;

			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}
	}

	/deep/ .uni-popup__wrapper-box {
		width: 540rpx;
		height: 280rpx;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
	}

	.popup-open {
		font-size: 34rpx;
		text-align: center;
		margin-top: 20rpx;
		color: #000;
	}

	.reason-input {
		border: 1px solid;
		width: 85%;
		margin: 20rpx 0;
		padding: 10rpx;
		color: #000;
		font-size: 30rpx;
	}

	.buttons {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		margin-top: 20rpx;
		height: 100%;

		view {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			height: 90%;
			width: 45%;
			background-color: #EEEEEE;
			border-radius: 40rpx;
		}
	}
</style>